<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <!-- <link  rel="stylesheet" type="text/css" href="../css/reset.css"/> -->
  <link
    rel="stylesheet"
    type="text/css"
    href="../scss/SurroundingPhotoWall.css"
  />

  <body>
    <div class="ring">
      <img src="../img/SurroundingPhotoWall/1.png" />
      <img src="../img/SurroundingPhotoWall/2.png" />
      <img src="../img/SurroundingPhotoWall/3.png" />
      <img src="../img/SurroundingPhotoWall/4.png" />
      <img src="../img/SurroundingPhotoWall/5.png" />
      <img src="../img/SurroundingPhotoWall/6.png" />
      <img src="../img/SurroundingPhotoWall/7.png" />
      <img src="../img/SurroundingPhotoWall/1.png" />
      <img src="../img/SurroundingPhotoWall/2.png" />
      <img src="../img/SurroundingPhotoWall/3.png" />
    </div>
    <script>
    /* 设计思路 scss驴拉磨盘*/

      // 获取所有的图片元素
      // const images = document.querySelectorAll('.ring img');
      //   // 对每一个图片元素添加鼠标移入事件
      //   images.forEach((image, index) => {
      //       image.addEventListener('mouseover', () => {
      //           // 鼠标移入时放大图片并旋转图片（这里设置的是绕y轴旋转30度）
      //           image.style.transform = `scale(1.2) rotateY(30deg)`;
      //       });
      //       image.addEventListener('mouseout', () => {
      //           // 鼠标移出时还原图片大小和旋转角度
      //           image.style.transform = 'scale(1) rotateY(0deg)';
      //       });
      //   });
      const images = document.querySelector(".ring");
      console.log(images);
      let yDeg = 0;
      setInterval(() => {
        yDeg = yDeg >= 360 ? 0 : yDeg + 10;
        images.style.transform = `rotateY(${yDeg}deg)`;
        images.style.transition = `0.5s`;
      }, 1000);
    </script>
  </body>
</html>
